import { FC, useEffect, useState } from "react";
import { Navigate, useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { getUserInfoAsync } from "@/pages/login/loginSlice";
import type { AppDispatch, RootState } from "@/store";
/*
  高阶组件HOC
    本质上是一个函数，接受组件作为参数，返回一个新组件

  WrappedComponent 组件是哪个？
    看路由路径（地址）
      /login --> EmptyLayout/Login
      /syt/dashboard --> Layout/Dashboard
*/
function withAuthorization(WrappedComponent: FC) {
  return () => {
    /*
      完成功能：
        1. 获取用户数据
        2. 如果用户登录了，访问登录页面，直接去首页
        3. 如果用户没有登录，访问首页等页面，直接去登录
    */
    const dispatch = useDispatch<AppDispatch>();
    const [loading, setLoading] = useState(false);
    const token = useSelector<RootState>((state) => state.login.token);
    const pathname = useLocation().pathname;

    // 1. 获取用户数据
    useEffect(() => {
      const getUserInfo = async () => {
        setLoading(true);
        await dispatch(getUserInfoAsync());
        setLoading(false);
      };
      if (token) {
        getUserInfo();
      }
    }, [token]);

    if (loading) {
      return <div>loading...</div>;
    }

    // 2. 如果用户登录了(token)，访问登录页面(location)，直接去首页
    if (pathname === "/login" && token) {
      return <Navigate to="/syt/dashboard" />;
    }

    // 3. 如果用户没有登录，访问首页等页面，直接去登录
    if (!token && pathname !== "/login") {
      return <Navigate to="/login" />;
    }

    return <WrappedComponent />;
  };
}

export default withAuthorization;
